<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 这个空白div用于创建足够的高度，使页面可以滚动 -->
  <div class="box" style="height: 1000px;"></div>
  <!-- 目标元素：当它进入或离开视口时会改变背景颜色 -->
  <div class="target" style="height: 100px; background: #ccc;">看我变色</div>

  <script>
    // 获取目标元素的DOM引用
    const target = document.querySelector('.target');

    // 创建IntersectionObserver实例
    // IntersectionObserver会监视元素是否进入或离开视口
    const observer = new IntersectionObserver((entries) => {
      // entries是IntersectionObserverEntry对象的数组
      // 每个entry包含了目标元素的交叉状态信息
      console.log(entries);
      entries.forEach(entry => {
        // isIntersecting属性表示目标元素是否与视口相交
        // 当目标进入视口
        if (entry.isIntersecting) {
          // 元素进入视口时，将背景色改为红色
          entry.target.style.background = 'red';
        } else {
          // 元素离开视口时，将背景色恢复为灰色
          entry.target.style.background = '#ccc';
        }
      });
    }, {
      // 可以在这里添加配置选项，例如：
      // root: null,       // 默认使用视口作为观察的参考
      // rootMargin: '0px', // 视口边缘的扩展或收缩
      // threshold: 0      // 目标元素有多少比例进入视口时触发回调
    });

    // 开始观察目标元素
    // 一旦调用observe方法，IntersectionObserver就会开始监视目标元素
    observer.observe(target);

    // 注意：如果不再需要观察，可以调用以下方法停止观察
    // observer.unobserve(target); // 停止观察特定目标
    // observer.disconnect();      // 停止观察所有目标
  </script>

</body>

</html>